<template>
  <div class="details">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav3')"><a><em class="before"></em><span>预算编制</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav1')"><a><em class="before"></em><span>制定目标(2021)</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:2;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav4')"><a><em class="before"></em><span>年度</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:1;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push(costOrIncome === '费用'? '/nav5' : '/nav6/年/其他')"><a><em class="before"></em><span>{{costOrIncome}}</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:0;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{typeName}}</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--表格-->
    <div class="container content mt-4">
      <div class="row">
        <div class="col-12  font-weight-bold text-secondary mb-3 mt-2 text-center">
          《{{typeName}}》预算编制（单位：元）
        </div>
      </div>
<!--      <div class="row">-->
<!--        <div class="col-12  font-weight-bold text-secondary font-italic mb-3 mt-2 text-right" style="text-decoration: underline">-->
<!--          利润：<span class="text-success">{{fixNum(profits)}}万元</span>-->
<!--        </div>-->
<!--      </div>-->
      <table class="table table-hover  table-striped" style="table-layout:fixed;">
        <thead class="">
        <tr>
          <th>序号</th>
          <th>《{{typeName}}》</th>
          <th>2020年</th>
          <th>2021年</th>
          <th>增减额</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td >1</td>
            <td>合计</td>
            <td>{{parseFloat(lastYearAmount).toFixed(2)}}</td>
            <td><input type="text" v-model="targetAmount"/></td>
            <td>{{(parseFloat(targetAmount) - parseFloat(lastYearAmount)).toFixed(2)}}</td>
            <td></td>
          </tr>
          <tr v-for="(item, index) in detailList">
            <td>{{index + 2}}</td>
            <td>{{item.project}}</td>
            <td>{{parseFloat(item.lastYearAmount).toFixed(2)}}</td>
            <td><input type="text" v-model="item.targetAmount"/></td>
            <td>{{(parseFloat(item.targetAmount) - parseFloat(item.lastYearAmount)).toFixed(2)}}</td>
            <td>
              <i class="el-icon-circle-close text-secondary" @click="deleteItem(item.id)"></i>
            </td>
          </tr>
        </tbody>
<!--        <tbody v-if="type==='153'">-->
<!--        <tr>-->
<!--          <td >1</td>-->
<!--          <td>合计</td>-->
<!--          <td>143200</td>-->
<!--          <td>220000</td>-->
<!--          <td>77800</td>-->
<!--          <td></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>1</td>-->
<!--          <td>蔬菜</td>-->
<!--          <td>143200</td>-->
<!--          <td>220000</td>-->
<!--          <td>77800</td>-->
<!--          <td></td>-->
<!--        </tr>-->
<!--        </tbody>-->
      </table>
      <div class="row">
        <div class="col-12 text-right">
          <button class="btn btn-primary btn-sm" @click="addProject=true">新&nbsp;&nbsp;增</button>
          <button class="btn btn-success btn-sm" @click="save">提&nbsp;&nbsp;交</button>
        </div>
      </div>
    </div>
    <!--弹出框-->
    <el-dialog title="新增项目" :visible.sync="addProject">
      <el-form :model="form">
       <div class="row">
         <div class="col-6">
           <el-form-item label="项目名称" :label-width="formLabelWidth" >
             <el-input v-model="form.project" placeholder="请输入项目名称" ></el-input>
           </el-form-item>
         </div>
        <div class="col-6">
          <el-form-item label="目标" :label-width="formLabelWidth" >
            <el-input v-model="form.yearAmount" placeholder="请输入目标" ></el-input>
          </el-form-item>
        </div>
       </div>
       <div class="row">
        <div class="col-6">
<!--          <el-form-item label="类别" :label-width="formLabelWidth" v-if="type.substring(0,2) === '12'">-->
<!--            <el-select v-model="form.typeId" placeholder="请选择">-->
<!--              <el-option label="早餐" value="121"></el-option>-->
<!--              <el-option label="午餐" value="122"></el-option>-->
<!--              <el-option label="晚餐" value="123"></el-option>-->
<!--              <el-option label="职场生活" value="124"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="类别" :label-width="formLabelWidth" v-else>-->
<!--            <el-select v-model="form.typeId" placeholder="请选择">-->
<!--              <el-option label="人工费用" value="1"></el-option>-->
<!--              <el-option label="固定费用和变动费用" value="2"></el-option>-->
<!--              <el-option label="福利费" value="3"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </div>
       </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProject = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'budget',
    data () {
      return {
        isClick:6,
        targetList: [],
        typeName: '',
        type: '',
        loading: {},
        targetAmount: 0.0,
        lastYearAmount: 0,
        predictAmount: 0.0,
        detailList: [],
        costOrIncome: '',
        addProject: false,
        formLabelWidth: '',
        profits: window.sessionStorage.getItem('profits'),
        form:{
          id:'',
          project:'',
          yearAmount: null,
          typeId:''
        },
        newItem: {
          content: '',
          year2020: '',
          amount_goal: ''
        },
        budgetAmount: 0,
      }
    },
    created() {
      this.typeName = this.$route.params.type
      this.type = this.$route.params.type2
      this.costOrIncome = this.type.substring(0,1) === '3' ? '费用' : '收入'
      this.getCostDetail()
      // this.getBudget()
    },
    methods: {
      getBudget() {
        this.$http.get('/api/getProfits').then(res => {
          if (res){
            if (res.data.list.length > 0) {
              res.data.list.forEach(item => {
                if (item.content === '利润') {
                  this.budgetAmount = item.amount_goal
                }
              })
            } else {
              this.budgetAmount = res.data.proAmount - res.data.costAmount
            }
          }
        })
      },
      gotoHome(){
        this.$router.push("/index");
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      gotoNav3: function(){
        this.$router.push("/nav3");
      },
      getCostDetail () {
        // this.loading = this.$loading({
        //   lock: true,//lock的修改符--默认是false
        //   text: 'Loading',//显示在加载图标下方的加载文案
        //   spinner: 'el-icon-loading',//自定义加载图标类名
        //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
        //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
        // });
        this.$http.get(
          '/api/getTarget',
          {
            params: {
              type: this.type
            }
          }).then(res => {
          this.targetAmount = 0
          this.lastYearAmount = 0
          this.detailList = res.data.list
          this.detailList.forEach(info => {
            this.targetAmount += info.targetAmount
            this.lastYearAmount += info.lastYearAmount
          })
          // this.loading.close()
        })
      },
      save() {
        let data = JSON.stringify(this.detailList)
        this.$http.post(
          '/api/save',
          data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          this.getCostDetail()
          this.$message({
            type: "success",
            message: '保存成功'
          })
        })
      },
      fixNum (num) {
        return num
      },
      add () {
        let data = []
        this.form.typeId = this.type
        data.push(this.form)
        data = JSON.stringify(data)
        this.$http.post(
          '/api/save',
          data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          this.addProject = false
          this.getCostDetail()
          this.form = {
            id:'',
            project:'',
            yearAmount: null,
            typeId: this.type
          }
          this.$message({
            type: "success",
            message: '保存成功'
          })
        })
      },
      deleteItem(id) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(
            '/api/delTarget', {
            params: {
              id: id
            }
          }
          ).then(res => {
            this.getCostDetail()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>
  tr{
    text-align: center;
  }
  .details {
    height: 250%;
  }
  .details table input {
    width: 100%;
    border: none;
    text-decoration: underline;
    color: #007bff;
    text-align: center;
    background: transparent;
  }
  table input:focus {
    outline: none;
  }
  .details .el-form-item__label{
    width: 30%;
  }
  .details .el-input{
    width: 70%;
  }
</style>
